<script>
$(document).ready(function(){
    $(".item:first").attr("class","item active")
});
</script>

<div id="focusslide" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#focusslide" data-slide-to="0" class="active"></li>
          <li data-target="#focusslide" data-slide-to="1"></li>
          <li data-target="#focusslide" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            {% for i in ban %}
            <div class="item"> <a href="{{i.img_link}}" target="_blank"><img src="/media/{{i.img}}" alt="" class="img-responsive"></a>
            </div>
            {% endfor %}
        </div>
        <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一个</span> </a>
        <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一个</span> </a>
      </div>